﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/templet.css"/>
		<link rel="stylesheet" href="css/footer&cbl.css" />
		<link rel="stylesheet" href="css/daohang.css" />
		<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>		
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<script type="text/javascript" src="js/hp.js"></script>
		<script type="text/javascript" src="js/templet.js"></script>
		<script type="text/javascript" src="js/templet1.js"></script>
		<title>网站服务</title>
	</head>
	<style>
		.navbar{background:#5d5c61;
			/*margin:0;*/
			height:70px;
			position: fixed;
			width: 100%;
			z-index: 10;

		}
	</style>
	<body>
	<div id="main">
		<header  data-spy="affix" data-offset-top="70">
			<nav class="navbar-inverse navbar" id="daohang">
				<div class="daohang">
					<div class="navbar-header clearfix">
						 	<button type="button" class="zd" id="zd" >
							<span class="glyphicon glyphicon-align-justify"></span>
						</button>
						<a href="#" class="navbar-brand"><img src="img/logo.png" style="margin-top:-15px"/></a>
					</div>
					<div class="collapse navbar-collapse" id="daohangtiao">
						<ul class="nav navbar-nav">
							<li><a href="index.html" style="font-weight: bold">首页</a></li>
							<li class="wd1"><a href="金融产品.html" style="font-weight: bold">金融产品</a>
								<ul class="wd2 clearfix">

									<li class="pull-left clearfix" style="width: 300px;margin-left: 200px">
										<p><a href="#" class="a1">基金</a></p>
										<ul class="ul1">
											<li><a href="#" title="基金交易">基金交易</a></li>
											<li><a href="#" title="基金公告">基金公告</a></li>
											<li><a href="#" title="新发基金">新发基金</a></li>
											<li><a href="#" title="热销基金">热销基金</a></li>
										</ul>
									</li>

									<li class="pull-left " style="width: 233px; margin-left: -150px">
										<p><a href="#" class="a1">理财</a></p>
										<ul class="ul1 pull-left">
											<li><a href="#">理财产品</a></li>
											<li><a href="#">新产品公告</a></li>
											<li><a href="#">持有产品查询</a></li>
											<li><a href="#">理财产品一览</a></li>
										</ul>
									</li>

									<li class="pull-left clearfix" style="width: 219px; margin-left:-70px">
										<p><a href="#" class="a1">保险</a></p>
										<ul class="ul1">
											<li><a href="#" title="保单查询">保单查询</a></li>
											<li><a href="#" title="保险知识">保险知识</a></li>
											<li><a href="#" title="保险产品购买">保险产品购买</a></li>
											<li><a href="#" title="保险产品分类">保险产品分类</a></li>
										</ul>
									</li>

									<li class="pull-left clearfix" style="width: 219px; margin-left:-70px">
										<p><a href="#" class="a1">境外产品</a></p>
										<ul class="ul1">
											<li><a href="https://www.boc.cn/sourcedb/whpj/index.html" title="外汇">外汇</a></li>
											<li><a href="#" title="海外债券">海外债券</a></li>
											<li><a href="#" title="海外基金">海外基金</a></li>
											<li><a href="#" title="结构性票据">结构性票据</a></li>
										</ul>
									</li>

									<li class="pull-left clearfix" style="width:300px; margin-left: -60px" >
										<p><a href="#" class="a1">花旗特色</a></p>
										<ul class="ul1">
											<li><a href="#" title="小额借贷">小额借贷</a></li>
											<li><a href="#" title="智慧投顾">智慧投顾</a></li>
											<li><a href="#" title="智慧理财">智慧理财</a></li>
											<li><a href="#" title="量身定制">量身定制</a></li>
										</ul>
									</li>

									<li class="pull-left clearfix" style="width:300px; margin-left:-140px" >
										<p><a href="#" class="a1">贵金属</a></p>
										<ul class="ul1">
											<li><a href="#" title="外汇">黄金</a></li>
											<li><a href="#" title="间隔"></a></li>
											<li><a href="#" title="白银">白银</a></li>
											<!--                                 <li><a href="#" title="海外">海外基金</a></li>-->
										</ul>
									</li>

								</ul>
							</li>
							<li><a href="市场前瞻.html" style="font-weight: bold">市场前瞻</a></li>
							<li><a href="社区.html" style="font-weight: bold">社区</a></li>

							<li><a href="网站服务.html" style="font-weight: bold">网站服务</a></li>

							<li class="gy1"><a href="" style="font-weight: bold">关于</a>
								<ul class="gy2 clearfix">
									<li class="pull-left clearfix" style="width: 130px;">
										<p><a href="#" class="a1">银行介绍</a></p>
										<ul class="ul1">
											<li><a href="#">银行介绍</a></li>
											<li><a href="#">服务条款</a></li>
											<li><a href="#">法律声明</a></li>
											<li><a href="#">可接受服务</a></li>
											<!--											<li><a href="#">免责声明</a></li>-->
										</ul>
									</li>

									<li class="pull-left clearfix" style="width: 330px;margin-left: 50px ">
										<p><a href="#" class="a1">常见问题</a></p>
										<ul class="ul1">
											<li><a href="金融产品.html#question">如何修改密码？</a></li>
											<li><a href="金融产品.html#question">密码忘记怎么办？</a></li>
											<li><a href="金融产品.html#question">如何在社区发言?</a></li>
											<li><a href="金融产品.html#question">积分兑换的礼品多久收到？</a></li>
											<li><a href="金融产品.html#question">如何购买理财、基金、债券等产品？</a></li>

										</ul>
									</li>
									<li class="lianxi pull-left clearfix" style="width: 478px; margin-left: -40px">
										<p><a href="#" class="a1">联系我们</a></p>
										<ul class="col-lg-12 col-md-12">
											<li><a href="#" class="aa1">客户服务热线</a></li>
											<li><a href="#" class="aa2">1234-123-456</a></li>
											<li><a href="#" class="aa1">QQ客户中心</a></li>
											<li><a href="#" class="aa2">123456789</a></li>
											<li><a href="#" class="aa1">银行地址</a></li>
											<li><a href="#" class="aa2">中环花园道3号</a></li>
										</ul>
									</li>
								</ul>
							</li>

						</ul>
						<ul class="zcdl nav navbar-nav pull-right">
							<li><a href="login.html" style="font-weight: bold;">登录</a></li>
							<li><a href="register.html" style="font-weight: bold;">注册</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</header>
		<div>
			<img src="img/市场前瞻2 .png" style="opacity: 0;height: 70px;">
		</div>
		<div class="main">
		  	<div class="main1">
				<div class="container">
					<div class="b1">
						<div class="b1-1 clearfix">
							<img src="img/网站服务.png" class="img-responsive" width="716" height="66"/>
						</div>
						<div class="b1-2">
							<p>您可以通过关键词快速找到您需要的服务，例如：网点业务预约、账户查询、产品使用等。</p>
						</div>
						<hr />
					</div>
					<div class="b2 clearfix">
						<div class="b2-1 col-lg-2 col-md-2 col-sm-10 col-xs-10">
							<div class="b2-1-1">
      							<input type="text" class="form-control" placeholder="搜索服务">
        						<a href="" class="glyphicon glyphicon-search"></a>
   							</div>
   							<ul class="bul2">
   								<li><span href="" style="font-weight: bold;font-size: large;margin-left: 20px;" onclick="show1()">便捷服务</span>
   								<div class="bul2-a">
   									<a class="">我要办卡</a><br />
   									<a class="">积分兑换</a><br />
   									<a class="">分期理财</a><br />
   									<a class="">保险申购</a><br />
   									<a class="">小额借贷</a><br />
   									<a class="">基金债券</a><br />
   									<a class="">更改密码</a><br />
   									<a class="">公告信息</a><br />
   								</div>
   								</li>
   								<li><span href="" style="font-weight: bold;font-size: large;margin-left: 20px;" onclick="show2()">人工客服</span>
   								<div class="bul2-a">
   									<a class="">在线服务</a><br />
   									<a class="">预约上门</a><br />
   								</div>
   								</li>
   								<li><span href="" style="font-weight: bold;font-size: large;margin-left: 20px;" onclick="show3()">悦享生活</span>
   									<div class="bul2-a">
   									<a class="">积分区</a><br />
   									<a class="">享美食</a><br />
									<a class="">惠旅游</a><br />
									<a class="">涨知识</a><br />
									<a class="">超划算</a><br />
									<a class="">优惠活动</a><br />
   									</div>
   								</li>
   							</ul>
						</div>
						<div class="b2-2 col-lg-10 col-md-10 col-sm-12 col-xs-12" style="display:block" id="Show1">
							<div class="b2-2-1 clearfix">
							</div>
						</div>
						<div class="b2-2 col-lg-10 col-md-10 col-sm-12 col-xs-12" style="display:none" id="Show2">
							<div class="b2-2-2 clearfix">
							</div>
						</div>
						<div class="b2-2 col-lg-10 col-md-10 col-sm-12 col-xs-12" style="display:none" id="Show3">
							<div class="b2-2-3 clearfix">
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
		<div class="footer">
			<div class="f1">
				<div class="container">
					<div class="ff1 col-lg-4 col-md-4 col-sm-12 col-xs-12">
						<div class="ff1-1">普惠老人网</div>
						<div class="ff1-2">专注为老年人提供金融服务和金融支持的普惠金融视角下的新型智慧无障碍服务交互平台</div>
						<div class="ff1-3">
							<p>Q Q客服：123456789</p>
							<p>客服热线：123456833</p>
						</div>
					</div>
					<div class="ff2 col-lg-8 col-md-8">
						<div class="col-lg-2 col-md-2">
							<div class="ff2-1"><p>银行信息</p></div>
							<p><a href="#">银行介绍</a></p>
							<p><a href="#">服务条款</a></p>
							<p><a href="#">法律声明</a></p>
						</div>
						<div class="col-lg-2 col-md-2">
							<div class="ff2-1"><p>技术支持</p></div>
							<p><a href="#">联系客服</a></p>
							<p><a href="#">使用教程</a></p>
							<p><a>免责声明</a></p>
						</div>
						<div class="col-lg-4 col-md-4">
							<div class="ff2-1"><p>快速入口</p></div>
							<p><a href="#">如何使用社区功能？</a></p>
							<p><a href="#">如何登录注册？</a></p>
							<p><a href="#">如何获得金融消息？</a></p>
						</div>
						<div class="col-lg-4 col-md-4" style="padding-right: 0;">
							<div class="ff2-1"><p>最新资讯</p></div>
							<p><a href="https://finance.chinadaily.com.cn/a/202203/18/WS6233e9a7a3101c3ee7acc3da.html">2022年反垄断工作怎么干？市场监管总局划重点</a></p>
							<p><a href="https://finance.chinadaily.com.cn/a/202203/18/WS6233e9a8a3101c3ee7acc3dc.html">美联储加息“靴子落地” 中国货币政策仍将以我为主</a></p>
						</div>
					</div>
				</div>

			</div>

		</div>
		
		<ul class="cbl" >
			<li><a href="#">
				<div class="icon d1"><i class="i1"></i><span class="title">在线客服</span></div>
			</a></li>
			<i class="clearfix"></i>
			<li><a href="#">
				<div class="icon d2"><i class="i2"></i><span class="title"></span></div>
			</a></li>
			<i class="clearfix"></i>
			<li><a  href="#">
				<div class="icon"><i class="i3"></i><span class="title">教程中心</span></div>
			</a></li>
			<i class="clearfix"></i>
			<li ><a  href="#">
				<div class="icon d4" data-toggle="tooltip" data-placement = "left" title="<img src='img/erweima.png'><br/> 关注微信 " data-html="true"><i class="i4"></i></div>
			</a></li>
		</ul>
	</div>
	<script>
		function show1(){
			document.getElementById("Show1").style.display="block";
			document.getElementById("Show2").style.display="none";
			document.getElementById("Show3").style.display="none";
		}
		function show2(){
			document.getElementById("Show1").style.display="none";
			document.getElementById("Show2").style.display="block";
			document.getElementById("Show3").style.display="none";
		}
		function show3(){
			document.getElementById("Show1").style.display="none";
			document.getElementById("Show2").style.display="none";
			document.getElementById("Show3").style.display="block";
		}

	</script>
	</body>	
</html>
